<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        .intro{
            width: 800px;
            margin:100px auto;
            border: 1px solid #ccc;
        }
        .intro ul{
            overflow: hidden;
            border-bottom: 1px solid #ccc;
        }
        .intro ul li{
            float: left;
            padding: 10px 20px;
            cursor: pointer;
        }
        .intro ul li.active{
            background-color: #ccc;
        }
        .intro .list{
            display: none;
        }
        .intro .list:first-of-type{
            display: block;
        }
        
    </style>
</head>
<body>

    <div class="intro">
        <ul>
            <li class="active">产品介绍</li>
            <li>产品评论</li>
            <li>服务</li>
        </ul>
        <div class="list">产品介绍信息</div>
        <div class="list">产品评论信息</div>
        <div class="list">服务信息</div>
    </div>

    <script>
        var li=document.querySelectorAll('li')
        var listDiv=document.querySelectorAll(".list")
        for(var i=0;i<li.length;i++)
        {
            li[i].setAttribute('data-ind',i)  //设置并添加属性data-index，把i的索引号给他
            li[i].onmouseover=function()
            {
                document.querySelector('.active').removeAttribute('class')  //移除前一个active类属性
                this.setAttribute('class','active')   //给当前添加active属性
                var ind=this.dataset.ind  //获取data开头属性的索引号给ind
                for(var j=0;j<listDiv.length;j++)  //排他思想
                {
                    listDiv[j].style.display='none'
                }
                listDiv[ind].style.display='block'
            }
        }
    </script>
    
</body>
</html>